<template>
  <div class="content">
    <div class="image-container">
      <div
        v-for="(folder, index) in folders"
        :key="index"
        class="image-container-item"
      >
        <div
          class="folder-container"
          @click="() => preview(folder)"
        >
          <div class="folder-preview">
            <img
              class="folder-image"
              :src="`local:///${folder.files[0].path}`"
            >
          </div>
          <div class="folder-name">
            {{ folder.name }} - {{ folder.files.length }}
          </div>
        </div>
      </div>
    </div>
    <a-modal
      v-model:visible="visible"
      title="Basic Modal"
      width="100%"
      wrap-class-name="full-modal"
      @ok="handleOk"
    >
      <div class="image-preivew-container">
        <a-image-preview-group>
          <a-image
            v-for="(file, index) in activeFolder?.files"
            :key="index"
            :src="`local:///${file.path}`"
          />
        </a-image-preview-group>
      </div>
    </a-modal>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ipcService } from '../service';

const folders = ipcService.readFolder('E:\\文件\\图册\\写真');

const visible = ref(false);

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const activeFolder = ref<any>(null);

function handleOk() {
  activeFolder.value = null;
  visible.value = false;
}

function preview(folder: unknown) {
  activeFolder.value = folder;
  visible.value = true;
}
</script>
<style lang="scss">
.image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.image-container-item {
  width: 300px;
}

.folder-container {
  height: 500px;
  overflow: hidden;
}

.folder-container:hover {
  cursor: pointer;
}

.folder-image {
  max-width: 100%;
}

.folder-name {
  height: 50px;
}

.folder-preview {
  height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-preivew-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.ant-image {
  width: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ant-image-preview-img {
  height: 100%;
}
</style>
